<template>
    <header class="header">
        <el-row type="flex" class="row-bg" justify="space-between">
            <el-col :span="5"><a href="/carModels"><img :src="logoUrl" class="logo" /></a></el-col>
            <el-col :span="3"><span class="cur-font">PARTS CATALOGUE</span></el-col>
            <el-col :span="16" :offset="7">
                <ul class="li-boder-h">
                    <li><i class="el-icon-shopping-cart-1"></i></li>
                    <li><i class="el-icon-user"></i></li>
                    <li><i class="el-icon-collection-tag"></i></li>
                    <li @click="showLanguage">{{ languageDec }}<i class="el-icon-arrow-down"></i></li>
                    <li>NEW SESSION</li>
                    <li>EPC UPDATES</li>
                    <li>ADMIN</li>
                </ul>
            </el-col>
        </el-row>
    </header>
</template>

<script>

export default {
    name: 'Header',
    data() {
        return {
            logoUrl: require(`@/assets/images/jlr-logo.png`),
            languageDec: 'ZH(ZH)'
        }
    },
    methods: {
        showLanguage() {
            this.$emit('showLanguage', true);
        }
    }
}
</script>

<style scoped>
.header {
    height: 48px;
    position: sticky;
    top: 0;
    padding: 8px 20px;
    line-height: 34px;
}
.header ul {
    margin: 0;
}
.header ul li {
    list-style: none;
    height: 22px;
    float: right;
    padding: 0 16px;
    width: auto;
    cursor: pointer;
}
.li-boder-h li:not(:first-child) {
    border-right: 1px dashed #acacac;
}
.header ul li i {
    font-size: 22px;
}
.logo {
    max-height: 34px;
    width: auto;
}
.cur-font {
    font-size: 15px;
    font-weight: bold;
}
</style>
